<template>
  <div style="background: #FFFFFF">
    <a-row style="padding: 10px 20px">
      <div class="page-title">
        疫情监测专题
      </div>
    </a-row>
    <!-- <img src="../../../images/line-icon.png"/> -->
    <a-row style="padding: 15px 0">
      <a-col class="title-container" :span="4">
        <div class="title-home">
          <div class="title-l-container">
            <div class="title-name">监测总人数</div>
            <div class="title-count">{{ titleArr.totalCount }}</div>
          </div>
          <div class="title-r-container"><img src="../img/total.png"/></div>
        </div>
      </a-col>
      <a-col class="title-container" :span="4">
        <div class="title-home">
          <div class="title-l-container">
            <div class="title-name">今日新增</div>
            <div class="title-count">{{ titleArr.addCount }}</div>
          </div>
          <div class="title-r-container"><img src="../img/add.png"/></div>
        </div>
      </a-col>
      <a-col class="title-container" :span="4">
        <div class="title-home">
          <div class="title-l-container">
            <div class="title-name">已核查</div>
            <div class="title-count">{{ titleArr.checkCount }}</div>
          </div>
          <div class="title-r-container"><img src="../img/checked.png"/></div>
        </div>
      </a-col>
      <a-col class="title-container" :span="4">
        <div class="title-home">
          <div class="title-l-container">
            <div class="title-name">未核查</div>
            <div class="title-count">{{ titleArr.notCheckCount }}</div>
          </div>
          <div class="title-r-container"><img src="../img/uncheck.png"/></div>
        </div>
      </a-col>
      <a-col class="title-container" :span="4">
        <div class="title-home">
          <div class="title-l-container">
            <div class="title-name">昨日漫入</div>
            <div class="title-count">{{ titleArr.inCount }}</div>
          </div>
          <div class="title-r-container"><img src="../img/input.png"/></div>
        </div>
      </a-col>
      <a-col class="title-container" :span="4">
        <div class="title-home">
          <div class="title-l-container">
            <div class="title-name">昨日漫出</div>
            <div class="title-count">{{ titleArr.outCount }}</div>
          </div>
          <div class="title-r-container"><img src="../img/output.png"/></div>
        </div>
      </a-col>
    </a-row>
    <a-row style="padding: 20px">
      <a-col :span="12" class="echarts-container">
        <jcrysfzb :loading="!jcrysfzbShow" v-if="jcrysfzbShow" :reportData="jcrysfzbData"></jcrysfzb>
      </a-col>
      <a-col :span="12" class="echarts-container">
        <jcrycszb :loading="!jcrycszbShow" v-if="jcrycszbShow" :reportData="jcrycszbData"></jcrycszb>
      </a-col>
    </a-row>
    <div style="border: solid 1px #000000; margin: 20px; padding: 15px;">
      <div class='search-item'>
        <a-cascader :options="regionData" @change="areaChange" :allowClear="false" placeholder="请选择" style="width: 220px;" />
      </div>
      <a-row style="padding: 20px">
        <a-col :span="12" class="echarts-container">
          <addAndChecked :loading="!addAndCheckedShow" v-if="addAndCheckedShow" :reportData="addAndCheckedData"></addAndChecked>
        </a-col>
        <a-col :span="12" class="echarts-container">
          <outAndInput :loading="!outAndInputShow" v-if="outAndInputShow" :reportData="outAndInputData"></outAndInput>
        </a-col>
      </a-row>
      <a-row style="padding: 20px">
        <a-col :span="12" class="echarts-container">
          <arriveFourteen :loading="!arriveFourteenShow" v-if="arriveFourteenShow" :reportData="arriveFourteenData"></arriveFourteen>
        </a-col>
        <a-col :span="12" class="echarts-container">
          <lastToFirst :loading="!lastToFirstShow" v-if="lastToFirstShow" :reportData="lastToFirstData"></lastToFirst>
        </a-col>
      </a-row>
    </div>
    <a-row style="padding: 20px">
      <provinceTable :loading="!provinceTableShow" v-if="provinceTableShow" :tableData="provinceTableData"></provinceTable>
    </a-row>
  </div>
</template>
<script>
import addAndChecked from './tjfxComponents/addAndChecked'
import outAndInput from './tjfxComponents/outAndInput'
import provinceTable from './tjfxComponents/provinceTable'
import jcrysfzb from './tjfxComponents/jcrysfzb'
import jcrycszb from './tjfxComponents/jcrycszb'
import lastToFirst from './tjfxComponents/lastToFirst'
import arriveFourteen from './tjfxComponents/arriveFourteen'
import { yqjc } from '@/api'
import { provinceAndCityDataPlus} from 'element-china-area-data'
export default {
  components: {
    outAndInput,
    addAndChecked,
    provinceTable,
    jcrysfzb,
    jcrycszb,
    lastToFirst,
    arriveFourteen
  },
  data() {
    return {
      titleArr: {
        addCount: 150,
        checkCount: 115,
        inCount: 120,
        notCheckCount: 123,
        outCount: 45,
        totalCount: 358
      },
      regionData: provinceAndCityDataPlus,
      outAndInputShow: false,
      outAndInputData: {},
      addAndCheckedShow: false,
      addAndCheckedData: {},
      provinceTableShow: false,
      provinceTableData: {},
      jcrysfzbShow: false,
      jcrysfzbData: {},
      jcrycszbShow: false,
      jcrycszbData: {},
      arriveFourteentShow: false,
      arriveFourteentData: {},
      arriveFourteenShow: false,
      lastToFirstData: {}
    }
  },
  methods : {
    areaChange (val, label) {
      
      console.log(1234)
    },
    getData () {
      this.outAndInputShow = false
      this.addAndCheckedShow = false
      this.provinceTableShow = false
      // 获取头部标题的数据
      yqjc.getTjfxTitle().then(res => {
        this.titleArr = res.data.data
      })
      // 获取折线图的数据
      // 流入流出趋势
      yqjc.lrlcqs().then(res => {
        this.outAndInputData = res.data.data
        this.outAndInputShow = true
      })
      // 人员新增趋势
      yqjc.personAddTrend().then(res => {
        this.addAndCheckedData = res.data.data
        this.addAndCheckedShow = true
      })
      // 获取下方列表的数据
       yqjc.provinceTjfxTableGet().then(res => {
        this.provinceTableData = res.data.data
        this.provinceTableShow = true
      })
      this.lastToFirstShow = true
      this.lastToFirstData = {}
      this.arriveFourteenShow = true
      this.arriveFourteenData = {}
      // 获取监测人员省份以及检测人员城市的数据
      this.jcrysfzbShow = true
      this.jcrysfzbData = {}
      this.jcrycszbShow = true
      this.jcrycszbData = {}
    }
  },
  created () {
    this.getData() 
  }
}
</script>
<style scoped>
  .page-title{
    color: #333333;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    padding: 10px 0;
    border-bottom: 1px solid #CCC;
  }
  .title-l-container{
    display: inline-block;
    /* width: 60%; */
    /* padding: 0 25px; */
    /* float: left; */
  }
  .title-home{
    width: 200px;
    margin: 0 auto;
    border: #CCC 1px solid;
    height: 110px;
    padding: 20px 20px;
  }
  .title-name{
    font-size:18px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color: #4D4D4D
  }
  .title-count{
    font-size:36px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color: #184C97
  }
  .title-r-container img{
    height: 100%;
    width: 100%;
    vertical-align: sub;
  }
  .echarts-container{
    padding: 10px
  }
  .title-r-container{
    width: 60px;
    height: 60px;
    float: right;
    border: 1px #184C97 dashed;
    margin-top: 5px;
  }
</style>

